<template>
    <div class="page vmess">
        <el-row>
            <el-col :span="3">
                <el-button @click="fetching">fetching</el-button>
            </el-col>
            <el-col class="label" :span="3">
                <span>RSS Link:</span>
            </el-col>
            <el-col :span="18">
                <el-input type="text" v-model="rss"></el-input>
            </el-col>
        </el-row>
        <el-row v-show="useCors">
            <el-col class="label" :span="3">
                <span>Iframe:</span>
            </el-col>
            <el-col :span="21">
                <iframe style="border:none; width: 100%; height: 100%; padding:0; margin:0;" ref="iframe" src=""></iframe>
            </el-col>
        </el-row>
        <hr/>
        <el-row>
            <el-col class="label" :span="5">
                <span>Subscription content</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-input type="textarea" v-model="content"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col class="label" :span="3">
                <span>VMess links</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-input type="textarea" v-model="urls"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-button @click="deserialize">deserialize</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <pre>{{ output }}</pre>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "vmess",
        data() {
            return {
                rss: '',
                iframeWindow: '',
                urls: '',
                content: '',
                output: '',
                useCors: false
            }
        },
        methods:{
            fetching(){
                this.useCors = false;
                if(this.rss){
                    fetch(this.rss,{
                        method: 'get',
                        headers:{"Content-Type": "text/plain"},
                        credentials: 'include',
                        mode: "cors"
                    }).then( req => req.text())
                    .then( text => {
                        this.content = text;
                    }) .catch( () => {
                        this.$refs.iframe.src = this.rss;
                    });
                }
            },
            deserialize(){
                this.urls = atob(this.content);
                this.output = JSON.stringify(JSON.parse(this.convertBatch(this.urls)),null, 4);
            },
            convertBatch(vmesses){
                let text = vmesses.split('\n').map( vmess => this.convert(vmess)).join(',');
                text = text.substring(0,text.length - 1);
                return '[' + text + ']';
            },
            convert(vmess){
                if(vmess.startsWith("vmess://")){
                    return this.decode(vmess.substring(8));
                }
                return this.decode(vmess);
            },
            decode( content){
                return decodeURIComponent(escape(atob(content)))
            },
            iframeLoaded(){
                if(this.$refs['iframe'].src && !this.$refs['iframe'].src.startsWith(window.location.origin)){
                    alert('由于浏览器限制，请自行复制订阅内容到下方框里。');
                    this.useCors = true;
                }
            }
        },
        mounted() {
            this.$refs['iframe'].onload = this.iframeLoaded;
        }
    }
</script>

<style scoped lang="less">
    .page.vmess{
      flex-flow: column;
      justify-content: center;
        .el-row{
          height: 45px;
          flex: 1;
          margin: 10px;
          .el-col.label{
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
    }
</style>
